<template>
<div class="pre-order">
        <!-- 表格 -->
        <qftable :columns="columns" 
        :tableLoading="tableLoading" 
        :tableData="tableData"
        :border="false">
        <!-- 产品名称 -->
        <template v-slot:productName="{row}">
            <img :src="row.imageUrl" alt="" height="20" style="vertical-align:middle">
            <b style="color:red">{{row.productName}}</b>
            <b>{{row.description}}</b>
        </template>
        <!-- 产品数量 -->
        <template v-slot:quantity="{row}">
            <el-input-number v-model="quantity" 
            :min="1" 
            @change="handleCountChange(row.price)"
            :max="row.inventory"
            label="描述文字">
        </el-input-number>
        </template>
        <!-- 总价格 -->
        <template v-slot:total>
            <b style="color:red" >{{tableTotal}}</b>
        </template>
    </qftable>
    
    <!-- 确认订单按钮 -->
    		<div class="total-fee">
			<div class="box-wrap">
				<div class="box-shadow">
					<span class="realpay--title"
						data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
					<span class="realpay--price-symbol">¥</span>
					<span class="realpay--price"
						style="color: rgb(255, 80, 0)">{{tableTotal}}</span>
					<div class="order-confirmAddr">
						<div class="confirmAddr-addr-user">
							<span class="confirmAddr-title">充值详情：</span><span class="confirmAddr-pro">{{desc}}</span>
						</div>
						<div class="confirmAddr-addr">
							<span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">{{userInfo.nickname}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="btn">
				<el-button type="danger" @click="commitOrder">提交订单</el-button>
			</div>
		</div>
</div>
</template>
<script setup>
import qftable from "../../../../components/qfTbale/index.vue"
import * as api from "../../../../api/vip"
import { useRoute,useRouter } from "vue-router";
import { ref,computed } from "vue";
import {useUser} from "../../../../store/allstore"
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
// pinia用户信息
let userStore=useUser()
let {userInfo}=storeToRefs(userStore)
// console.log(nickname.value)
// 当前路由对象
let route=useRoute()
// 全局路由对象
let router=useRouter()
// 业务
// 1.更具上一个页面传递过来的query参数，获取当前产品信息
let {product_id}=route.query
// 2.展示产品信息
// 根据商品id获取商品详情发送请求
let desc=ref("")
let getProduct=async()=>{
    tableLoading.value=true
    try{
        let res =await api.getProduct(product_id)
        console.log(res)
        tableData.value=res.data.data
        tableLoading.value=false
        // 产品详情，表格下面的结构使用
        desc.value=res.data.data[0].description
        // 第一次拿到了商品，所以对total进行初次赋值，可以将price作为total的首次参数
        tableTotal.value=res.data.data[0].price
}catch(e){
    tableLoading.value=false
    console.log(e)
}
}

// 声明一个加载动画
let tableLoading=ref(false)
// 声明一个表格数据
let tableData=ref([])
// 声明一个对象，用于展示表格数据
let columns=ref([
    {
        label:"产品名称",
        prop: 'productName'
    },
    {
        label:'单价',
        prop: 'price'
    },
    {
        label:'数量',
        prop: 'quantity'
    },
    {
        label:'总价',
        prop: 'total'
    },
])

// 声明计数器的数量和数量变化的方法
let quantity=ref(1)
// 计算总价格，（只是给用户看的，不是最终付款的价格）
let tableTotal=ref("0.00")
let handleCountChange=(price)=>{
    tableTotal.value=(quantity.value*price).toFixed(2)

}
// 3.进行下单
// 支付核心流程或者关键字
// 下单：传递商品id和商品数量
let commitOrder=async()=>{
    //1.调用下单接口，传递product_id和产品的数量quantity
    try{
        let res=await api.preOrder(product_id,quantity.value)
            // 2.跳转页面，跳转到支付的页面 pay/payorder
        router.push({path:"/pay/preorder",query:{order_id:res.data.order_id}})
        ElMessage({
            type:'success',
            message:res.data.msg
        })
    }catch(e){
        console.log(e)
    }

    // 3.payMent页面需要拉取订单详情，并且发起支付
}


getProduct()
</script>
<script>
export default{
    meta:{
        name:'确认订单'
    }
}
</script>
<style lang="scss" scoped>
.price {
	color: #ff0036;
	font-weight: bolder;
}
.total_fee {
	font-size: 16px;
	color: #ff0036;
}
.el-button {
	width: 180px;
	border-radius: 0;
}
.confirm-title {
	text-align: left;
	margin-bottom: 30px;
}
.pre-order {
	padding: 80px 100px 0 100px;
}
.total-fee {
	margin-top: 50px;
	text-align: right;
}
.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;
	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;
		.realpay--title {
			font-weight: 700;
			color: #333;
		}
		.realpay--price-symbol {
			font-size: 26px;
			margin-right: 4px;
			color: #999;
		}
		.realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
		}
		.order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;
			// text-align: center;
			// font-family: "PingFang SC";
			.confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}
			.confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
		}
	}
}
</style>